<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>来料检验审核</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="iqc-report-approval">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>

      <div class="iqc-report-approval-table-div">
        <el-table fit stripe border :data="reportList" style="width:100%" height="parent">
          <el-table-column prop="checkReportNo" label="检验报告编号" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column prop="purhaseId" label="采购单号" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column prop="companyOrderId" label="订单编号" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column prop="factoryId" label="工厂型号" width="120px" header-align="center"></el-table-column>
          <el-table-column prop="coustomId" label="客户型号" width="120px" header-align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="160px" header-align="center">
          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="检验日期" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="是否需要审核" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.isNeedApproval===1?'需要':'不需要'}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('iqc.iqcReportApproval.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status===0" type="primary" size="mini" @click="toApproval(scope.row)">去审核</el-button>
              <el-button v-else type="primary" size="mini" @click="toLook(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" :title="dialogType==='approval'?'来料检验审核':'查看'" :visible.sync="openDialog" :close-on-click-modal="false" @closed="dialogClosed">
      <div style="height:100%;overflow:auto">
        <iqc-report-form v-if="openDialog" :type="dialogType" :material="selectReport" @approval-success="approvalSuccess"></iqc-report-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/iqc/iqcReport/css/iqcReportForm.css",
    "./css/searchForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/models/baseModel.js",
    "../models/iqcReportModel.js",
    "/iqc/iqcReport/iqcReportForm.js"
  ]);

</script>

<script src="./searchForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    mixins: [tablePaginationMixin()],

    data: function () {
      var search = {
        orderId: '',
        companyOrderId: '',
        factoryId: '',
        customerId: '',
        materialName: '',
        providerNo: '', //供方编号
        providerName: '', //供应商
        colorDescription: '', //描述
        status: '',
        startTime: null,
        endTime: null
      };
      return {
        moment: moment,
        loading: false,
        reportList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        openDialog: false,
        selectReport: null,
        dialogType:'',
        i18n: i18n
      };
    },

    created: function () {
      this.setReportList(true);
    },

    methods: {
      setReportList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
        };

        var fields = ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'materialName', 'providerNo', 'providerName', 'colorDescription',
          'status'
        ];
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          var value = search[field];
          if (value !== '') {
            postData[field] = value;
          }
        }

        var startTime = search.startTime;
        if (startTime !== null) {
          postData.startTime = moment(startTime).format('YYYY-MM-DD');
        }

        var endTime = search.endTime;
        if (endTime !== null) {
          postData.endTime = moment(endTime).format('YYYY-MM-DD');
        }

        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/getQcResult', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var reportList = res.returnData;
          if (reportList.length === 0 && pagination.currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setReportList();
            });
            return;
          }

          self.reportList = reportList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setReportList(true);
      },

      pageChange: function () {
        this.setReportList();
      },

      toApproval: function (report) {
        this.selectReport = report;
        this.dialogType = 'approval';
        this.openDialog = true;
      },

      toLook:function(report){
        this.selectReport = report;
        this.dialogType = 'look';
        this.openDialog = true;
      },

      approvalSuccess:function(){
        this.openDialog = false;
        this.setReportList();
      },

      dialogClosed:function(){
        this.selectReport = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      IqcReportForm: IqcReportForm
    }
  });

</script>

<style>
  .iqc-report-approval {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .iqc-report-approval .iqc-report-approval-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
